import 'package:auto_route/auto_route.dart';
import 'package:casdon/common/widget/common_app_bar.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

@RoutePage()
class PairnetReadmeScreen extends StatelessWidget {
  const PairnetReadmeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: CommonAppBar(title: '自动发现/搜索配网功能怎么用'),
      body: SingleChildScrollView(
        padding: EdgeInsets.all(16.w),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            _buildStepSection(),
            SizedBox(height: 24.h),
            _buildDeviceGuideSection(),
          ],
        ),
      ),
    );
  }

  Widget _buildStepSection() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          '使用步骤',
          style: TextStyle(
            fontSize: 16.r,
            fontWeight: FontWeight.w600,
            color: Colors.black87,
          ),
        ),
        SizedBox(height: 12.h),
        _buildStepItem('1. 在App首页的右上角点击加号，然后选择"添加设备"以启用该功能。'),
        SizedBox(height: 8.h),
        _buildStepItem(
          '2. 确保设备已接通电源，并按照产品说明书的指引将其重置至待配网状态。通常情况下，未配网的设备在首次上电时会自动进入此状态。',
        ),
        SizedBox(height: 8.h),
        _buildStepItem('3. 如果自动发现未成功，您可以手动添加设备。'),
      ],
    );
  }

  Widget _buildStepItem(String text) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          margin: EdgeInsets.only(top: 2.h),
          child: Icon(Icons.circle, size: 4.w, color: Colors.black54),
        ),
        SizedBox(width: 8.w),
        Expanded(
          child: Text(
            text,
            style: TextStyle(
              fontSize: 14.r,
              color: Colors.black87,
              height: 1.5,
            ),
          ),
        ),
      ],
    );
  }

  Widget _buildDeviceGuideSection() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          '设备配网状态设置指南',
          style: TextStyle(
            fontSize: 16.r,
            fontWeight: FontWeight.w600,
            color: Colors.black87,
          ),
        ),
        SizedBox(height: 8.h),
        Text(
          '以下是一些常见设备进入待配网状态的设置方式，供参考请以产品说明书为准：',
          style: TextStyle(
            fontSize: 12.r,
            color: Colors.black54,
            fontStyle: FontStyle.italic,
          ),
        ),
        SizedBox(height: 16.h),
        _buildDeviceTypeCard('蓝牙设备', [
          '确保设备停电后超过10秒，再重新通电。',
          '长按设备上的重置按钮5秒左右，直至设备指示灯开始闪烁，表示设备已进入待配网模式。',
        ]),
        SizedBox(height: 16.h),
        _buildDeviceTypeCard('Zigbee设备', [
          '确保家中有可用的Zigbee网关设备，并保持在线。',
          '将设备断电并重新通电超过10秒。',
          '长按设备上重置按钮5秒左右，直至设备指示灯开始闪烁，表示设备处于待配网模式。',
        ]),
      ],
    );
  }

  Widget _buildDeviceTypeCard(String title, List<String> steps) {
    return Container(
      width: double.infinity,
      padding: EdgeInsets.all(16.w),
      decoration: BoxDecoration(
        color: Colors.grey[50],
        borderRadius: BorderRadius.circular(8.r),
        border: Border.all(color: Colors.grey[200]!),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            title,
            style: TextStyle(
              fontSize: 15.r,
              fontWeight: FontWeight.w600,
              color: Colors.black87,
            ),
          ),
          SizedBox(height: 8.h),
          ...steps.map(
            (step) => Padding(
              padding: EdgeInsets.only(bottom: 4.h),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    '• ',
                    style: TextStyle(fontSize: 14.r, color: Colors.black54),
                  ),
                  Expanded(
                    child: Text(
                      step,
                      style: TextStyle(
                        fontSize: 13.r,
                        color: Colors.black87,
                        height: 1.4,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}
